<!DOCTYPE html>
<html lang="en">
<!-- 我的账户 -->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
	<!-- jquery -->
	<script src="assets/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		<!-- 导航栏的JS-开始 -->
		var itemHost = "http://localhost:3001/itemservice"
		//获取二级分类菜单，循环遍历添加菜单
		function getItemCat(){
			$.ajax({
				type:"get",
				url: itemHost + "/itemCat/getAll",
				success: function(result){
					if(result.status == 200){
						//console.log(result.data)
						var itemCatList = result.data
						//遍历一级分类菜单
						for(var i in itemCatList){
							var itemCatOne = itemCatList[i]
							var itemCatOneChildren = itemCatOne.children
							//遍历二级分类菜单
							if(i==0){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#dog").append(
										`
											<li><a class="a" onclick="dogItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==1){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#cat").append(
										`
											<li><a class="a" onclick="catItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==2){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#other").append(
										`
											<li><a class="a" onclick="otherItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
						}
					}					
				}
			})
		}
		//点击狗狗分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function dogItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击猫咪分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function catItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击其他分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function otherItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击搜索框触发
		function searchItem(){
			let keyword = $("#search").val()
			$.ajax({
				type: "get",
				url: itemHost+"/item/search",
				data: {
					keyword:keyword
				},
				success: function(result){
					if(result.status==200){
						window.location.href = "shop.html"
					}
				}
			})
		}
		//退出登录
		function logout(){
			if(localStorage.getItem("accessToken") == null){
				alert("您还没有登录")
			}else{
				localStorage.removeItem("accessToken")
				localStorage.removeItem("refreshToken")
				sessionStorage.removeItem("userName")
				window.location.href = "index.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到account.html页面 */
		function accountAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "account.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到cart.html页面 */
		function cartAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "cart.html"
			}
		}
		<!-- 导航栏的JS-结束 -->
		var userHost = "http://localhost:3001/userservice"
		var orderHost = "http://localhost:3001/orderservice"
		var userName = ""
		//文档就绪
		$(function(){
			//认证是否登录，如果已登录获取登录的用户名信息
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
				window.location.href="login.html"
			}else{
				userName = sessionStorage.getItem("userName")
				getUser(userName)
			}
			//获取萌宠商城导航栏信息
			getItemCat()
		})
		function getUser(userName){
			$.ajax({
				type: "post",
				url: userHost+"/user/login/"+userName,
				success: function(result){
					let user=result;
					$("#tab1").append(
						`<tr align="center">
							<td id="id">${user.id}</td>
							<td id="name">${user.username}</td>
							<td id="addr">${user.addr}</td>
							<td id="phone">${user.phone}</td>
						 </tr>`
					)
					$("#tab2").append(
						`<div class="row">
                            <div class="col-lg-6">
                                <div class="single-input-item m-b-15">
                                    <label for="username" class="required m-b-10">用户名${user.username}</label>
                                </div>
                            </div>
                        </div>
							<div class="single-input-item m-b-15">
								<label for="phone" class="required m-b-10">手机号: ${user.phone}</label>
							</div>
                        <div class="single-input-item m-b-15">
                            <label for="email" class="required m-b-5">电子邮件地址: ${user.email}</label>
                        </div>`
					)
				}
			})
		}
		/* 点击订单按钮，获取所有的历史订单 */
		function getAllOrder(){
			$.ajax({
				type: "get",
				url: orderHost+"/order/getAllOrder",
				data: {
					userName: userName
				},
				headers: {
					"Authorization": "Bearer "+localStorage.getItem("accessToken")
				},
				success: function(result){
					if(result.status == 200){
						var orderList = result.data
						showOrder(orderList)
					}
				}
			})
		}
		/* 生成订单列表 */
		function showOrder(orderList){
			for(var i in orderList){
				var price = orderList[i].price
				var num = orderList[i].num
				var total = parseInt(price)+10*parseInt(num)
				$("#show-order").append(
					`
					<tr>
					    <td>${parseInt(i)+1}</td>
					    <td>${orderList[i].title}</td>
					    <td>￥${price}</td>
					    <td>${num}</td>
					    <td>￥${total}</td>
						<td>${userName}</td>
						<td>${orderList[i].addr}</td>
					</tr>
					`
				)
			}
		}
		function getBrowerLogs(){
			$.ajax({
				type: "get",
				url: itemHost+"/browerLog/getBrowerLogs",
				success: function(result){
					if(result.status == 200){
						var logs = result.data
						showBrowerLogs(logs)
					}
				}
			})
		}
		function showBrowerLogs(logs){
			console.log(logs)
			for(var i in logs){
				$("#show-browerLogs").append(
					`
					<tr>
					    <td>${parseInt(i)+1}</td>
					    <td>${logs[i].itemId}</td>
					    <td>${logs[i].title}</td>
					    <td>￥${logs[i].price}</td>
					    <td>${logs[i].created}</td>
					</tr>
					`
				)
			}
		}
	</script>
</head>

<body>
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Top Start -->
        <div class="header-top bg-name-primary">
            <div class="container">
                <div class="row align-items-center">

					<!-- Header Top Message Start -->
					<div class="col-12 col-lg-6">
					    <div class="header-top-msg-wrapper">
					        <a href="index.html" class="header-top-message">欢迎来到萌宠奇遇!</a>
					    </div>
					</div>
					<div class="col-12 col-lg-6">
					    <div class="header-top-settings">
							<a onclick="logout()" style="font-size: small; float: right; color: white;"> 退出登录 </a>
					        <a href="register.html" style="font-size: small; float: right; color: white;"> 注册&nbsp;&nbsp;|&nbsp;&nbsp; </a>
					        <a href="login.html" style="font-size: small; float: right; color: white;"> 登录&nbsp;&nbsp;|&nbsp;&nbsp;</a>
					    </div>
					</div>
					<!-- Header Top Message End -->

                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="main-menu">
                                <ul>
                                    <li class="has-children">
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li class="has-children position-static">
                                         <a href="#">萌宠商城</a>
                                        <ul class="mega-menu" id="itemCat">
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">狗狗</h4>
                                                <ul class="m-b-n10" id="dog">
                                                    
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">猫咪</h4>
                                                <ul class="m-b-n10" id="cat">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">其他</h4>
                                                <ul class="m-b-n10" id="other">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <div class="megamenu-image">
                                                    <a href="shop.html">
                                                        <img class="fit-image" src="assets/images/header/mega-menu.png" alt="Megamenu Image">
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="forum.html">萌宠论坛</a>
                                    </li>
                                    <li class="has-children">
                                        <a href="diary.html">萌宠日记</a>
                                    </li>
                                    <li><a href="login.html">登录</a></li>
                                    <li><a href="register.html">注册</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-lg-3 col-md-8 col-6">
                            <div class="header-actions">

                                <!-- Header Action Search Button Start -->
                                <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                    <div class="action-execute">
                                        <a class="action-search-open" href="javascript:void(0)"><i class="icon-magnifier icons"></i></a>
                                        <a class="action-search-close" href="javascript:void(0)"><i class="ti-close"></i></a>
                                    </div>
                                    <!-- Search Form and Button Start -->
                                    <form class="header-search-form" >
                                        <input type="text" class="header-search-input" placeholder="搜索商品" value="" id="search">
                                        <button class="header-search-button" onclick="searchItem()"><i class="icon-magnifier icons"></i></button>
                                    </form>
                                    <!-- Search Form and Button End -->
                                </div>
                                <!-- Header Action Search Button End -->

                                <!-- Header My Account Button Start -->
                                <a onclick="accountAuth()" class="header-action-btn header-action-btn-wishlist"">
                                    <i class="icon-user icons"></i>
                                </a>
                                <!-- Header My Account Button End -->

                                <!-- Header Action Button Start -->
                                <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                    <a onclick="cartAuth()" class="cart-visible">
                                        <i class="icon-handbag icons"><span style="font-size: medium;">&nbsp;购物车</span></i>
                                    </a>
                                </div>
                                <!-- Header Action Button End -->
                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

    </div>
    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">我的账户&nbsp;</h2>
                        <ul>
                          <li><a href="index.html">首页&nbsp;</a></li>
                            <li>我的账户&nbsp;</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- My Account Section Start -->
    <div class="section section-margin">
        <div class="container">

            <div class="row">
                <div class="col-lg-12">

                    <!-- My Account Page Start -->
                    <div class="myaccount-page-wrapper">
                        <div class="row">

                            <!-- My Account Tab Menu Start -->
                            <div class="col-lg-3 col-md-4">
                                <div class="myaccount-tab-menu nav" role="tablist">
                                    <a href="#dashboad" class="active" data-bs-toggle="tab"><i class="fa fa-dashboard"></i>
                                        仪表盘</a>
                                    <a href="#orders" data-bs-toggle="tab" onclick="getAllOrder()"><i class="fa fa-cart-arrow-down"></i> 订单</a>
                                    <a href="#payment-method" data-bs-toggle="tab" onclick="getBrowerLogs()"><i class="fa fa-credit-card"></i> 浏览记录</a>
                                    <a href="#address-edit" data-bs-toggle="tab"><i class="fa fa-map-marker" onclick="getUser()"></i> 地址管理</a>
                                    <a href="#account-info" data-bs-toggle="tab" ><i class="fa fa-user" onclick="getUser()"></i> 账户详情</a>
                                    <a href="login.html"><i class="fa fa-sign-out"></i> 登出</a>
                                </div>
                            </div>
                            <!-- My Account Tab Menu End -->

                            <!-- My Account Tab Content Start -->
                            <div class="col-lg-9 col-md-8">
                                <div class="tab-content" id="myaccountContent">

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade show active" id="dashboad" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">仪表盘</h3>
                                            <div class="welcome">
                                              <p>你好,<strong>尊敬的用户</strong></p>
                                            </div>
                                            <p>此页面可以查看您的账户信息、订单信息；可以更改您的地址、更换新的密码；可以退出登录</p>
											<p><strong>提示1：</strong>每件商品会收取10元的运费，已计入总付款金额中</p>
											<p><strong>提示2：</strong>历史订单按照创建时间降序展示</p>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="orders" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">历史订单</h3>
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>商品名称</th>
                                                            <th>商品价格</th>
                                                            <th>商品数量</th>
                                                            <th>实付款</th>
															<th>收货人</th>
															<th>收货地址</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="show-order">
                                                        
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -- >

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="payment-method" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">浏览记录</h3>
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>编号</th>
															<th>商品编号</th>
                                                            <th>商品名称</th>
                                                            <th>商品价格</th>
                                                            <th>浏览时间</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="show-browerLogs">
                                                        
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="address-edit" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">收货地址</h3>
                                            <address>
												<table align="center" width="80%">
													<thead>
													<tr align="center">
														<td>编号</td>
														<td>用户名</td>
														<td>收货地址</td>
														<td>手机号</td>
													</tr>
													</thead>
													<tbody id="tab1" align="center" width="80%">
														<tr align="center">
															<td id="id"></td>
															<td id="name"></td>
															<td id="addr"></td>
															<td id="phone"></td>
														</tr>
													</tbody>
												</table>
                                            </address>
											<div>
												<a href="#" class="btn btn btn-dark btn-hover-primary rounded-0"><i class="fa fa-edit m-r-10"></i>修改地址</a>
											</div>
                                            
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="account-info" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">账户详情</h3>
                                            <div class="account-details-form">
                                                <form action="#">
													<table id="tab2">
														<!-- <tr>
															<div class="row">
																<div class="col-lg-6">
																	<div class="single-input-item m-b-15">
																		<label for="username" class="required m-b-10">用户名</label>
																		<input id="username2" type="text" placeholder="用户名:" />
																	</div>
																</div>
															</div>
														</tr>
                                                    <div class="single-input-item m-b-15">
                                                        <label for="phone" class="required m-b-10">手机号</label>
                                                        <input id="phone2" type="text" placeholder="手机号" />
                                                    </div>
                                                    <div class="single-input-item m-b-15">
                                                        <label for="email" class="required m-b-5">电子邮件地址</label>
                                                        <input id="emil2" type="email" placeholder="电子邮件地址" />
                                                    </div> -->
													</table>
                                                    <fieldset>
                                                        <legend>修改密码</legend>
                                                        <div class="single-input-item m-b-15">
                                                            <label for="current-pwd" class="required m-b-10" id="label2">旧密码</label>
                                                            <input id="oldPwd" type="password" placeholder="旧密码:" />
                                                        </div>
                                                        <div class="row m-b-n15">
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item m-b-15">
                                                                    <label for="new-pwd" class="required m-b-10" id="label10">新密码</label>
                                                                    <input id="newPwd" type="password" placeholder="新密码:" />
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item m-b-15">
                                                                    <label for="confirm-pwd" class="required m-b-10" id="label11">确认密码</label>
                                                                    <input id="reNewPwd" type="password" placeholder="确认密码:" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                    <div class="single-input-item single-item-button m-t-30">
                                                        <button class="btn btn btn-primary btn-hover-dark rounded-0" onclick="updataPwd">保存更改</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div> <!-- Single Tab Content End -->

                                </div>
                            </div>
                            <!-- My Account Tab Content End -->

                        </div>
                    </div>
                    <!-- My Account Page End -->

                </div>
            </div>

        </div>
    </div>
    <!-- My Account Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
                <div class="row m-b-n40">
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1000">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">关于我们</h1>
                            <p class="desc-content">然后疼痛就会停止，疼痛就会受到折磨。</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start m-b-n10">
                                <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1200">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">有用的链接</h2>
                            <ul class="widget-list">
                              <li><a href="wishlist.html">帮助和联系我们</a></li>
                                <li><a href="contact.html">退货和退款</a></li>
                                <li><a href="contact.html">线上商店</a></li>
                                <li><a href="contact.html">条款与条件</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1400">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">帮助</h2>
                            <ul class="widget-list">
                              <li><a href="wishlist.html">愿望清单</a></li>
                                <li><a href="contact.html">定价计划</a></li>
                                <li><a href="contact.html">物流跟踪</a></li>
                                <li><a href="contact.html">退换商品</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1600">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">发送时事通讯</h2>
                            <div class="widget-body">
                              <p class="desc-content m-b-20">订阅我们的时事通讯，首次购买可享受10%的折扣。</p>
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap p-t-5">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">发送</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->
    </footer>
    <!-- Footer Section End -->

    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="assets/js/main.js"></script>
</body>

</html>